// Name:                     Input group
//
// Description:              Define style for input group
//
// Component:                `.am-input-group`

// Sub-objects:              `.am-input-group-label`
//                           `.am-input-group-btn`
//
// Modifiers:                `.am-input-group-lg`
//                           `.am-input-group-sm`
//                           `.am-input-group-primary`
//                           `.am-input-group-secondary`
//                           `.am-input-group-success`
//                           `.am-input-group-warning`
//                           `.am-input-group-danger`
//
// Uses:                     Form
//                           Button
//
// Via:                      http://getbootstrap.com/components/#input-groups
//
// =============================================================================


/* ==========================================================================
   Component: Input group
 ============================================================================ */

.am-input-group {
  position: relative;
  display: table;
  border-collapse: separate;

  // reset padding and float for grid
  &[class*="col-"] {
    float: none;
    padding-left: 0;
    padding-right: 0;
  }

  .am-form-field {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
  }
}


// Display as table-cell
// =============================================================================

.am-input-group-label,
.am-input-group-btn,
.am-input-group .am-form-field {
  display: table-cell;

  &:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
}

// Input group text
.am-input-group-label,
.am-input-group-btn {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle; // Match the inputs
}


// Text input groups
// =============================================================================

.am-input-group-label {
  padding: @input-padding 1em;
  font-size: @form-font-size;
  font-weight: normal;
  line-height: 1.2;
  color: @input-color;
  text-align: center;
  background-color: @input-group-label-bg;
  border: 1px solid @input-group-label-border-color;
  border-radius: @global-border-radius;

  // Nuke default margins from checkboxes and radios to vertically center within.
  input[type="radio"],
  input[type="checkbox"] {
    margin-top: 0;
  }
}


// Reset rounded corners
// =============================================================================

.am-input-group .am-form-field:first-child,
.am-input-group-label:first-child,
.am-input-group-btn:first-child > .am-btn,
.am-input-group-btn:first-child > .am-btn-group > .am-btn,
.am-input-group-btn:first-child > .am-dropdown-toggle,
.am-input-group-btn:last-child > .am-btn:not(:last-child):not(.dropdown-toggle),
.am-input-group-btn:last-child > .am-btn-group:not(:last-child) > .am-btn {
  .border-right-radius(0);
}

.am-input-group-label:first-child {
  border-right: 0;
}

.am-input-group .am-form-field:last-child,
.am-input-group-label:last-child,
.am-input-group-btn:last-child > .am-btn,
.am-input-group-btn:last-child > .am-btn-group > .am-btn,
.am-input-group-btn:last-child > .am-dropdown-toggle,
.am-input-group-btn:first-child > .am-btn:not(:first-child),
.am-input-group-btn:first-child > .am-btn-group:not(:first-child) > .am-btn {
  .border-left-radius(0);
}

.am-input-group-label:last-child {
  border-left: 0;
}


// Button input groups
// =============================================================================

.am-input-group-btn {
  position: relative;
  // Jankily prevent input button groups from wrapping with `white-space` and
  // `font-size` in combination with `inline-block` on buttons.
  font-size: 0;
  white-space: nowrap;

  // Negative margin for spacing, position for bringing hovered/focused/actived
  // element above the siblings.
  > .am-btn {
    position: relative;
    border-color: @input-border;
    + .am-btn {
      margin-left: -1px;
    }
    // Bring the "active" button to the front
    &:hover,
    &:focus,
    &:active {
      z-index: 2;
    }
  }

  // Negative margin to only have a 1px border between the two
  &:first-child {
    > .am-btn,
    > .am-btn-group {
      margin-right: -2px;
    }
  }

  &:last-child {
    > .am-btn,
    > .am-btn-group {
      margin-left: -1px;
    }
  }
}


// Modifiers - sizing
// =============================================================================

.am-input-group-lg > .am-form-field,
.am-input-group-lg > .am-input-group-label,
.am-input-group-lg > .am-input-group-btn > .am-btn {
  .am-input-lg();
  @padding-v: unit(ceil(0.625 * 10 * @form-font-size-lg));
  @padding-h: unit(10 * @form-font-size-lg);

  padding: ~"@{padding-v}px" ~"@{padding-h}px"!important;
}

.am-input-group-sm > .am-form-field,
.am-input-group-sm > .am-input-group-label,
.am-input-group-sm > .am-input-group-btn > .am-btn {
  .am-input-sm();

  @padding-v: unit(ceil(0.625 * 10 * @form-font-size-sm));
  @padding-h: unit(10 * @form-font-size-sm);

  padding: ~"@{padding-v}px" ~"@{padding-h}px"!important;
}


// Modifiers - colors
// =============================================================================

.am-input-group-primary {
  .input-group-color-variant();
}

.am-input-group-seconday {
  .input-group-color-variant(@btn-secondary-bg, @btn-secondary-color, @btn-secondary-border);
}

.am-input-group-success {
  .input-group-color-variant(@btn-success-bg, @btn-success-color, @btn-success-border);
}

.am-input-group-warning {
  .input-group-color-variant(@btn-warning-bg, @btn-warning-color, @btn-warning-border);
}

.am-input-group-danger {
  .input-group-color-variant(@btn-danger-bg, @btn-danger-color, @btn-danger-border);
}

.input-group-color-variant(@bg: @btn-primary-bg, @color: @btn-primary-color, @border: @btn-primary-border) {
  .am-input-group-label {
    background: @bg;
    color: @color;
  }

  .am-input-group-label,
  .am-input-group-btn > .am-btn,
  .am-form-field {
    border-color: @border;
  }
}


// Hooks
// =============================================================================

// TODO: v2 中使用 flexbox